<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<style>
			.del{
				color: blueviolet;
				cursor: pointer;
			}
			.add{
				color: blueviolet;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<table border="1" id="table">
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
				<th>操作-</th>
				<th>操作+</th>
			</tr>

		</table>
	</body>
	<script type="text/javascript">
		window.onload = function () {
			let myObj = [{
				id:1,
				sno:"001",
				name:"张三",
				subject:"软件技术"
			},{
				id:2,
				sno:"002",
				name:"李四",
				subject:"软件技术"
			},{
				id:3,
				sno:"003",
				name:"王五",
				subject:"软件技术"
			}]
			
			let orihtml = document.getElementById('table').innerHTML
			draw()
			function del (id) {
				let objTemp =[]
				myObj.forEach(item =>{
					if (item.id!==id) {
						objTemp.push(item)
					}
				})
				myObj=objTemp
				console.dir(myObj)
				draw()
			}
			
			
				function add (id) {
				let objTemp =[]
				myObj.forEach(item =>{
					if (item.id!==id) {
						objTemp.push(item)
					}
				})
				myObj=objTemp
				console.dir(myObj)
				draw()
			}

//			渲染
			function draw () {
				let oTable = document.getElementById('table')
				let html = orihtml
				myObj.forEach(item=>{
					html +=`
					<tr>
						<td width="200px" align="center">
							${item.sno}
						</td>
						<td width="200px" align="center">
							${item.name}
						</td>
						<td width="200px" align="center">
							${item.subject}
						</td>
						<td width="200px" align="center" >
							<span class="del" id = "${item.id}">
								删除
							</span>
						</td>
						
						<td width="200px" align="center" >
							<span class="add" id = "${item.id}">
								增加
							</span>
						</td>

					</tr>								
					`
				})
				oTable.innerHTML=html
				
				myObj.forEach(item =>{
					document.getElementById(item.id).onclick = function () {
						del(item.id) 
					}
					
				})
			}		
		}
	
	</script>
</html>
